<template>
  <div id="componts">
    <p>这是子组件</p>
    <p>{{data}}</p>
    <p>{{count}}</p>
    <p ref="text">这是子组件里面的标签</p>
  </div>
</template>
<script>
export default {
  name: "componts",
  props: {
    data: Number
  },
  components: {},
  data() {
    return {
      count: 1
    };
  },
  beforeCreate() {
    console.group("生成前");
    try {
      console.log(this.data);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.count);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.$refs.text);
    } catch (error) {
      console.log(error);
    }
    console.groupEnd();
  },
  created() {
    console.group("生成后");
    try {
      console.log(this.data);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.count);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.$refs.text);
    } catch (error) {
      console.log(error);
    }
    console.groupEnd();
  },
  beforeMount() {
    console.group("挂载前");
    try {
      console.log(this.data);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.count);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.$refs.text);
    } catch (error) {
      console.log(error);
    }
    console.groupEnd();
  },
  activated(){
    console.group("activated");
    try {
      console.log(this.data);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.count);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.$refs.text);
    } catch (error) {
      console.log(error);
    }
    console.groupEnd();
  },
  mounted() {
    console.group("挂载后");
    try {
      console.log(this.data);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.count);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.$refs.text);
    } catch (error) {
      console.log(error);
    }
    console.groupEnd();
  },
  beforeUpdate() {
    console.group("更新前");
    try {
      console.log(this.data);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.count);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.$refs.text);
    } catch (error) {
      console.log(error);
    }
    console.groupEnd();
  },
  updated() {
    console.group("更新后");
    try {
      console.log(this.data);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.count);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.$refs.text);
    } catch (error) {
      console.log(error);
    }
    console.groupEnd();
  },
  beforeDestroy() {
    console.group("销毁前");
    try {
      console.log(this.data);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.count);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.$refs.text);
    } catch (error) {
      console.log(error);
    }
    console.groupEnd();
  },
  deactivated(){
    console.group("deactivated");
    try {
      console.log(this.data);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.count);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.$refs.text);
    } catch (error) {
      console.log(error);
    }
    console.groupEnd();
  },
  destroyed() {
    console.group("销毁后");
    try {
      console.log(this.data);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.count);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.$refs.text);
    } catch (error) {
      console.log(error);
    }
    console.groupEnd();
  },
  beforeRouteEnter(to, from, next) {
    console.group("路由离开前");
    try {
      console.log(this.data);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.count);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.$refs.text);
    } catch (error) {
      console.log(error);
    }
    console.groupEnd();
    next();
    // ...
  },
  beforeRouteLeave(to, from, next) {
    console.group("路由离开后");
    try {
      console.log(this.data);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.count);
    } catch (error) {
      console.log(error);
    }
    try {
      console.log(this.$refs.text);
    } catch (error) {
      console.log(error);
    }
    console.groupEnd();
    next();
    // ...
  }
};
</script>
<style scoped>
</style>